
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.type" class="filter-item"  :clearable="false" @change="switchReport">
        <el-option
          v-for="item in types"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        style="margin-left: 20px;"
        class="filter-item"
        v-model="listQuery.dateR"
        v-if="showRevenue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        placeholder="选择时间">
      </el-date-picker>
      <el-date-picker
        style="margin-left: 20px;"
        class="filter-item"
        v-if="showUsage"
        v-model="listQuery.date"
        :type="dateType"
        :clearable="false"
        placeholder="选择时间">
      </el-date-picker>
      <el-button v-if="showRevenue" :loading="btnLoading"  style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-download" @click="exportRevenue">
        营收导出
      </el-button>
      <el-button v-if="showUsage" :loading="btnLoading" style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-download" @click="exportUsage">
        用水导出
      </el-button>
    </div>
    <el-row :gutter="10">
      <el-col :span="4">
        <areas :area-type="areaType" :areas="treeAreas" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <el-card>
          <el-link type="info">{{listQuery.address}}</el-link>
          <el-divider></el-divider>
          <revenue-report ref="revenue" v-if="showRevenue" :date="dateRange" :code="listQuery.area_code" :key="revenueKey" />
          <usage-report ref="usage" v-if="showUsage" :date="dateString" :code="listQuery.area_code"  :key="usageKey"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script >
import areas from '@/components/area/AreaTree'
import {getAreaTree} from "@/api/area";
import {checkPermission} from "@/utils/permission"
import RevenueReport from "@/views/analysis/components/FinanceRevenueReport.vue";
import moment from "moment/moment";
import UsageReport from "@/views/analysis/components/FinanceUsageReport.vue";

export default {
  name: 'FinanceReport',
  components: {UsageReport, RevenueReport, areas},
  data() {
    return {
      areaType: 2,
      treeAreas: [],
      revenueKey: 0,
      usageKey: 0,
      btnLoading: false,
      types:[
        { label: '营收报表', value: 'date-revenue' },
        { label: '用水月报', value: 'month-usage' },
        { label: '用水年报', value: 'year-usage' }
      ],
      listQuery: {
        address:'全部区域',
        dateR:[] ,
        date:'',
        type:'date-revenue',
        area_code:'',
        is_contains_sub: this.$store.getters.showSubData,
      },
      pickerOptions: {
        shortcuts: [ {
          text: '月报',
          onClick(picker) {
            const d = new Date();
            picker.$emit('pick', [moment(d).startOf('month'), moment(d).endOf('month')]);
          }
        }, {
          text: '年报',
          onClick(picker) {
            const d = new Date();
            picker.$emit('pick', [moment(d).startOf('year'), moment(d).endOf('year')]);
          }
        }]
      },
    };
  },
  created() {
    this.getAreaTree()
  },
  computed: {
    dateType(){
      const l = this.listQuery.type.split('-')
      return l[0]
    },
    dateString(){
      const t =  moment(this.listQuery.date)
      if(this.dateType === 'year'){
        return  t.format('YYYY')
      }
      if(this.dateType === 'month'){
        return t.format('YYYY-MM')
      }
      if(this.dateType === 'date'){
        return  t.format('YYYY-MM-DD')
      }
    },
    dateRange(){
      const l = []
      if(this.listQuery.dateR.length === 0) {
        return l
      }
      l.push(moment(this.listQuery.dateR[0]).format('YYYY-MM-DD'))
      l.push(moment(this.listQuery.dateR[1]).format('YYYY-MM-DD'))
      return l
    },
    reportType(){
      const l = this.listQuery.type.split('-')
      return l[1]
    },
    showRevenue(){
      return this.reportType === 'revenue'
    },
    showUsage(){
      return this.reportType === 'usage'
    }
  },
  methods: {
    checkPermission,
    getAreaTree() {
      getAreaTree({type: 2,is_contains_sub:this.$store.getters.showSubData}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick: function (data) {
      if (this.listQuery.area_code !== data.code) {
        this.listQuery.area_code = data.code
        this.listQuery.address = data.address
      }
    },
    switchReport() {
      if(this.reportType === 'revenue') {
        this.revenueKey++
      }else{
        this.usageKey++
      }
    },
    exportRevenue() {
      this.btnLoading = true
      this.$refs.revenue.exportData()
      setTimeout(() => {
        this.btnLoading = false
      }, 2 * 1000)
    },
    exportUsage() {
      this.btnLoading = true
      this.$refs.usage.exportData()
      setTimeout(() => {
        this.btnLoading = false
      }, 1.5 * 1000)
    }
  }
}
</script>
